<template>
    <div>
        <section class="msite">
        <!--首页头部-->
        <HeaderTop :title="address.name">
          <router-link class="header_search" slot="left" to="/search">
            <i class="iconfont icon-sousuo"></i>
          </router-link>
          <router-link class="header_login" slot="right" :to="userInfo._id ? '/userInfo' : '/login'">
            <span class="header_login_text" v-if="!userInfo._id">登录|注册</span>
            <span class="header_login_text" v-else>
              <i class="iconfont icon-person"></i>
            </span>
          </router-link>
        </HeaderTop>
        <!--首页导航-->
        <nav class="msite_nav">
          <div class="swiper-container" v-if="categorys.length">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(categorys, index) in categorysArr" :key="index">
                <a href="javascript:" class="link_to_food" v-for="item in categorys" :key="item.id">
                  <div class="food_container">
                    <img :src="baseImgUrl+item.image_url">
                  </div>
                  <span>{{item.title}}</span>
                </a>
              </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
          </div>
          <img src="./images/msite_back.svg" alt="" v-else>
        </nav>
        <!--首页附近商家-->
        <div class="msite_shop_list">
          <div class="shop_header">
            <i class="iconfont icon-xuanxiang"></i>
            <span class="shop_header_title">附近商家</span>
          </div>
          <ShoopList />
        </div>
      </section>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import HeaderTop from "../../components/HeaderTop/HeaderTop"
import ShoopList from "../../components/ShoopList/ShoopList"
import Swiper from "swiper"
import "../../../node_modules/swiper/css/swiper.min.css"
export default {
  data() {
    return {
      baseImgUrl: "https://fuss10.elemecdn.com"
    }
  },
    mounted() {
      this.$store.dispatch('getCategorys')
      this.$store.dispatch('getShops')
    },
    components: {
      HeaderTop,
      ShoopList
    },
    watch: {
      categorys(value) {
        //watch监听categorys这个数据，categorys数组中有数据了，
        /**
         * 状态改变跟界面显示是两步
         * 1. 更新状态数据
         * 2. 异步更新界面
         * 所以现在是在异步更新界面之前执行的，是不行的
         * 我们需要一个能在界面更新之后就能执行的回调函数 nextTick()
         */
        // 一旦完成界面更新，立即调用
        this.$nextTick(() => {
          // 这个语句要写在数据更新之后
          // 界面更新之后，创建swiper实例对象，来实现轮播
          // 其实不需要这么麻烦，swiper有一个监视器 observer:true 即可
          new Swiper('.swiper-container', {
            loop: true,
            pagination: {
              el: '.swiper-pagination',
            }
          });
        })
      }
    },
    computed: {
      ...mapState(['address', 'categorys', 'userInfo']),
      /**
       * 根据categorys一维数组生成一个二维数组
       * 小数组中的元素个数最大是8
       */
      categorysArr() {
        const {categorys} = this;
        //准备空的二维数组
        const arr = [];
        //准备一个小数组（最大长度为8）
        let minArr = [];
        //遍历
        categorys.forEach(item => {
          //如果小数组已经满了，就让它重新指向一个空的数组
          if(minArr.length === 8) {
            minArr = []
          }

          //如果minArr是空的，将小数组放入大数组中（关联起来）
          if(minArr.length === 0) {
            arr.push(minArr)
          }
          
          //被关联后的小数组，里面放什么，大数组里就有什么
          minArr.push(item)
        })

        return arr;
      }
    }
}
</script>

<style lang="stylus" scoped>
@import "../../common/stylus/mixins.styl"
.msite  //首页
    width 100%
    .msite_nav
        bottom-border-1px(#e4e4e4)
        margin-top 45px
        height 200px
        background #fff
        .swiper-container
            width 100%
            height 100%
            .swiper-wrapper
                width 100%
                height 100%
                .swiper-slide
                    display flex
                    justify-content center
                    align-items flex-start
                    flex-wrap wrap
                    .link_to_food
                        width 25%
                        .food_container
                            display block
                            width 100%
                            text-align center
                            padding-bottom 10px
                            font-size 0
                        img
                            display inline-block
                            width 50px
                            height 50px
                        span
                            display block
                            width 100%
                            text-align center
                            font-size 13px
                            color #666
        .swiper-pagination
            >span.swiper-pagination-bullet-active
                background #02a774
    .msite_shop_list
        top-border-1px(#e4e4e4)
        margin-top 10px
        background #fff
        .shop_header
            padding 10px 10px 0
            .shop_icon
                margin-left 5px
                color #999
            .shop_header_title
                color #999
                font-size 14px
                line-height 20px
        
</style>
